import jqAjax from './jqAjax'
import $ from 'jquery'
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

var defaultModal = {
    name: 'default-modal',
    props: ['isFailed', 'isSucceed', 'isLoading', 'isSendValid', 'lastRes', 'title'],
    components: {Loading},
    template: `
        <div class="modal fade" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
                <loading :active="isLoading"
                :can-cancel="false"
                backgroundColor='transparent'
                loader='dots'
                :is-full-page="false"></loading>
              <div class="modal-header">
                <h5 class="modal-title">{{title}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"  @click="cancel">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <slot></slot>
                
              </div>
              <div class="modal-footer d-flex align-items-center py-2">
                <slot name="footer-left"></slot>
                <div class="alert fade ml-1 mr-auto my-0 py-2" role="alert" :class="[{show: lastRes}, isFailed ? 'alert-danger' : 'alert-success']">
                  <span v-if="isFailed">{{(lastRes && lastRes.msg) || "操作失败"}}</span>
                  <span v-else>{{(lastRes && lastRes.msg) || "操作成功"}}</span>
                </div>
                <button type="button" class="btn btn-sm btn-primary m-1"  @click="confirm" :disabled="!isSendValid" v-if="!isFailed">确定</button>
                <button type="button" class="btn btn-sm btn-danger m-1"  @click="confirm" :disabled="!isSendValid" v-else>重试</button>
                <button type="button" class="btn btn-sm btn-success m-1"  @click="$emit('done'); cancel();" v-if="isSucceed">完成</button>
                <button type="button" class="btn btn-sm btn-secondary m-1" data-dismiss="modal" @click="cancel" :disabled="isLoading" v-else>取消</button>
              </div>
            </div>
          </div>
        </div>
    `,
    methods: {
        confirm: function() {
            this.$emit('confirm');
        },
        cancel: function() {
            this.$emit('cancel');
        }
    }
};

export {defaultModal};

export default {
    mixins: [jqAjax],
    props: {
        title: {
            type: String
        },
        url: {
            type: String,
            required: true
        },
        callback: {
            type: Function
        }
    },
    computed: {
        isSendValid() {
            return !this.isLoading;
        },
        modalProps() {
            return {
                title: this.title,
                isLoading: this.isLoading,
                isSucceed: this.isSucceed,
                isFailed: this.isFailed,
                lastRes: this.lastRes,
                isSendValid: this.isSendValid
            }
        }
    },
    methods: {
        confirm() {
            var vm = this;
            vm.clearState();
            vm.ajaxPost(vm.url, vm.getParams())
            .done(res => {
                vm.callback && vm.callback(res);
            });
            vm.$emit('confirm');
        },
        cancel() {
            var vm = this;
            $(vm.$el).modal('hide');
            this.$emit('cancel');
        },
        getParams() {
            return {};
        }
    },
    mounted() {
        var vm = this;
        $(vm.$el).modal('show').on('hidden.bs.modal', function() {
            vm.$destroy();
            $(vm.$el).remove()
        });
    }
}